<template>
	<!-- 话题banner内容  -->
	<view>
		<!-- 背景图 -->
		<view class="t_i_bg_box" :style="'background-image: url('+topicData.cover+') '">
		</view>

		<!-- 话题详情 -->
		<view class="info_box_parent">
			<view class="info_box">
				<view class="topic_head">
					<image class="topic_cover" :src="topicData.cover"></image>

					<view class="topic_info">
						<text class="topic_name">{{topicData.name}}</text>
						<text class="topic_des">{{topicData.memberCount}} {{topicData.memberNickname}}</text>
					</view>

					<view class="admin_btn">
						<u-button v-if="!topicData.joined" shape='circle' size="small" type="primary" text="加入" color="#06a8ff"
									@click="joinTopic()">
						</u-button>
						<u-button v-else-if="topicData.joined && (topicData.memberType < 2)" shape='circle' size="small" type="primary"
								  @click="gotoEdit()" text="管理" color="#06a8ff">
						</u-button>
						<u-button v-else-if="topicData.joined" shape='circle' size="small" type="primary" text="已加入" color="#bcc0ca"
									@click="quitTopic()">
						</u-button>
					</view>
				</view>

				<view class="topic_detail_parent" >
					<view class="topic_detail">{{topicData.description}}</view>
					<view class="members" @click="gotoMemberInfo">
						<image class="member_cover" :src="item.avatar" v-for="(item,index) in topicData.memberList"></image>
						<u-icon name="arrow-right" color="#fff" size="14"></u-icon>
					</view>
				</view>

			</view>
		</view>


		<u-modal :show="showQuit" :content="'确定退出话题#' + topicData.name + '?'" showCancelButton width="540rpx">
			<view slot="confirmButton" style="display: flex;flex-direction: row;">
				<u-button plain shape='circle' type="primary" text="退出" color="#bcc0ca" style="width: 80px;"
					@click="doQuitTopic()"></u-button>
				<u-button shape='circle' type="primary" text="再想想" color="#06a8ff" style="width: 80px;"
					@click="showQuit = false"></u-button>
			</view>

		</u-modal>


		<u-toast ref="uToast"></u-toast>


	</view>
</template>

<script>
	export default {
		props: {
			topicData: {
				type: Object,
				default () {
					return {
						"id": "",
						"name": "",
						'cover': "",
						"memberNickname": "",
						"memberCount": 0,
						"memberList": [],
						"joined": false,
						"memberType": null,
						'description': ''
					}
				}
			},
		},
		data() {
			return {
				// 是否显示退出模态框
				showQuit: false,
			}
		},
		methods: {
			// 加入话题
			joinTopic(){
				if(!this.$authUtil.isLoginedin(true)){
					return
				}
				uni.showLoading({
					title: '加载中'
				});
				this.$httpApi.baseArticlePost('user/topic/op/'+this.topicData.id, {}).then(({data}) => {
					if (data.code == "000000") {
						this.topicData.joined = true
						this.topicData.memberType = 2
					} else {
						this.$refs.uToast.show({type: 'error',icon: false,message: data.mesg})
					}
					uni.hideLoading();
				}).catch(err => {
					uni.hideLoading();
				})
			},
			// 退出话题
			quitTopic() {
				if(!this.$authUtil.isLoginedin(true)){
					return
				}
				this.showQuit = true;
			},
			// 退出话题
			doQuitTopic(){
				this.$httpApi.baseArticleDelete('user/topic/op/'+this.topicData.id, {}).then(({data}) => {
					if (data.code == "000000") {
						this.topicData.joined = false
					} else {
						this.$refs.uToast.show({type: 'error',icon: false,message: data.mesg})
					}
					this.showQuit = false
				}).catch(err => {
					this.showQuit = false
				})
			},
			// 修改资料
			gotoEdit() {
				if(this.topicData.id){
					uni.navigateTo({
						url: '/pages/topic/editTopic?id='+this.topicData.id
					});
				}
			},
			// 详情
			gotoMemberInfo() {
				if(this.topicData.id){
					uni.navigateTo({
						url: '/pages/topic/topicMemberList?id='+this.topicData.id
					});
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	//背景
	.t_i_bg_box {
		height: 140px;
		z-index: -1;
		background-size: cover;
		filter: blur(18px);
	}
	.info_box_parent{
		position: absolute;
		top: 0;
		width: 100%;
	}
	.info_box {
		display: flex;
		flex-direction: column;
		height: 120px;
		padding: 15px;
		background-color: rgba(7,17,27, .4);
		backdrop-filter: blur(10px);
	}

	// 话题资料
	.topic_head {
		display: flex;
		flex-direction: row;
	}

	.topic_cover {
		width: 70px;
		height: 70px;
		border-radius: 10px;
		margin-right: 10px;
	}

	.topic_info {
		display: flex;
		flex: 1;
		flex-flow: column;
		justify-content: center;
	}

	.topic_name {
		color: #fff;
		font-size: 18px;
		font-weight: 500;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		display: flex;
		align-items: center;
	}

	.topic_des {
		font-size: 12px;
		color: #fff;
		margin-top: 8px;
		line-height: 18px;
		height: 18px;
	}
	.admin_btn{
		width: 70px;
		display: flex;
		align-items: center;
	}
	.topic_detail_parent{
		display: flex;
		flex-direction: row;
		margin-top: 10px;
		height: 25px;
	}
	.topic_detail {
		flex: 1;
		height: 25px;
		line-height: 25px;
		font-size: 12px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		color: #fff;
	}
	.members{
		margin-left: 15px;
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.member_cover{
		width: 16px;
		height: 16px;
		border-radius: 16px;
		margin-left: -5px;
		border-width: 1px;
		border-color: #FFFFFF;
		border-style: solid;
	}

</style>
